<template>
  <view class="service-time">
    <u-popup
      :show="popupShow"
      mode="bottom"
      :closeable="true"
      @close="close"
      :round="5"
      :safeAreaInsetBottom="false"
    >
      <view class="title">请选择送达时间</view>
      <view class="pick-box row">
        <view class="date">
          <view
            :class="['ditem', { isActive: currentDate == index }]"
            v-for="(date, index) in dateList"
            :key="index"
            @click="chooseDate(index)"
          >
            {{ date }}
          </view>
        </view>
        <view class="time">
          <view class="batch">
            <view class="btitle">午餐批次</view>
            <view
              class="bitem space-between"
              v-for="(btime, bindex) in beforeList"
              :key="bindex"
            >
              <view :class="{ chooseclass: btime == currentTime }">{{
                btime
              }}</view>
              <view class="check">
                <u-checkbox-group
                  v-model="checkboxValue1"
                  placement="row"
                  @change="checkboxChange"
                >
                  <u-checkbox
                    shape="circle"
                    activeColor="#09BB07"
                    size="20"
                    iconSize="17"
                    :name="btime"
                  >
                  </u-checkbox>
                </u-checkbox-group>
              </view>
            </view>
          </view>
          <view class="batch">
            <view class="btitle after">晚餐批次</view>
            <view
              class="bitem space-between"
              v-for="(atime, aindex) in afterList"
              :key="aindex"
            >
              <view :class="{ chooseclass: atime == currentTime }">{{
                atime
              }}</view>
              <view class="check">
                <u-checkbox-group
                  v-model="checkboxValue1"
                  placement="row"
                  @change="checkboxChange"
                >
                  <u-checkbox
                    shape="circle"
                    activeColor="#09BB07"
                    size="20"
                    iconSize="17"
                    :name="atime"
                  >
                  </u-checkbox>
                </u-checkbox-group>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 模态弹出框 -->
    <view class="model">
      <u-modal
        :show="modelShow"
        :content="content"
        :showCancelButton="true"
        @confirm="confirm"
        @cancel="cancel"
      ></u-modal>
    </view>
  </view>
</template>

<script>
export default {
  name: "service-time",
  options: {
    styleIsolation: "shared",
  },
  props: {
    popupShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 模态框
      modelShow: false,
      content: "该时间点已有预订订单，扔要继续选择吗？",
      // 选择时间点
      currentTime: "",
      checkboxValue1: [],
      // 时间点
      beforeList: ["12:00", "13:00"],
      afterList: ["18:00", "19:00"],
      // 默认选择日期
      currentDate: 0,
      // 日期
      dateList: [
        "今天 （周一) ",
        "明天 （周二) ",
        "后天 （周三) ",
        "5月26日 （周四)",
        "5月27日 （周五) ",
        "5月30日 （周一)",
      ],
    };
  },
  methods: {
    checkboxChange(e) {
      console.log("checkboxChange", e);
      this.currentTime = e[0];
      if (e[0] == "12:00") {
        this.modelShow = true;
      } else {
        this.$emit(
          "checkTime",
          this.dateList[this.currentDate],
          this.currentTime
        );
      }
    },
    // 模态框确认
    confirm() {
      this.modelShow = false;
      this.$emit(
        "checkTime",
        this.dateList[this.currentDate],
        this.currentTime
      );
    },
    // 模态框取消
    cancel() {
      this.modelShow = false;
    },
    // 关闭
    close() {
      this.$emit("closePopup");
    },
    // 选择日期
    chooseDate(index) {
      console.log(index, "currentDate", this.currentDate);
      this.currentDate = index;
      if (this.currentTime) {
        this.$emit(
          "checkTime",
          this.dateList[this.currentDate],
          this.currentTime
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.service-time {
  .title {
    font-size: 35rpx;
    font-weight: bold;
    text-align: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #c7c7c7;
  }

  .pick-box {
    padding: 22rpx;
    background-color: #fdfdfd;
    font-size: 26rpx;
    color: #0d0d0d;

    .date {
      flex: 1;
      text-align: center;

      .ditem {
        padding: 20rpx 0;
        background-color: #e5e3e3;
        border: 3rpx solid #fdfdfd;
      }

      .isActive {
        background-color: #fdfdfd;
        color: #346bf6;
        font-weight: bold;
      }
    }

    .time {
      flex: 1;
      padding: 0 47rpx 20rpx 65rpx;
      height: 100%;
      font-size: 28rpx;

      .batch {
        .btitle {
          padding: 15rpx 15rpx 25rpx;
          background-color: #ffdca5;
          border-radius: 5rpx;
          display: inline-block;
          margin-bottom: 10rpx;
        }

        .after {
          background-color: #aadcfe;
        }

        .bitem {
          padding: 20rpx 0;

          .chooseclass {
            color: #346bf6;
            font-weight: bold;
          }
        }
      }
    }
  }
  .model {
    /deep/ .u-fade-enter-active {
      z-index: 9999999999999 !important;
    }
    /deep/ .u-fade-zoom-enter-active {
      z-index: 99999999999999 !important;
    }
    /deep/ .u-popup__content {
      width: 650rpx !important;
    }
  }
}
</style>
